/**
 * Created by 001 on 2017/11/7.
 */
//播放页面
import React from 'react'
import MusicProgress from '../components/progress'
import './player.less'
import { Link } from 'react-router';
import Pubsub from 'pubsub-js'

let duration = null;
let Player = React.createClass({
    getInitialState(){
        return {
            progress: 0,
            volume: 0,
            isPlay: true,    //记录播放状态
            leftTime:0  //剩余时间
        }
    },
    componentDidMount(){
        //绑定页面但是返回时候回从新绑定(重复绑定)要记得解绑
        $('#player').bind($.jPlayer.event.timeupdate, (e)=> {
            duration = e.jPlayer.status.duration;//获取音频的总时间
            this.setState({
                progress: e.jPlayer.status.currentPercentAbsolute,
                volume: e.jPlayer.options.volume * 100,
                leftTime:this.formatTime(duration*(1- e.jPlayer.status.currentPercentAbsolute/100))
            })
        });
    },
    //在部件销毁时候解绑事件
    componentWillUnMount(){
        $("#player").unbind($.jPlayer.event.timeupdate);
    },
    progressChangeHandler(progress){
        console.log("从子组件获取进度条信息:" + progress);
        $("#player").jPlayer('play', duration * progress);
    },
    progressChangeVolumeHandler(progress){
        $("#player").jPlayer('volume', progress);
    },
    play(){
        if (this.state.isPlay) {
            $("#player").jPlayer('pause')
        } else {
            $("#player").jPlayer('play')
        }
        this.setState({
            isPlay: !this.state.isPlay
        });
    },
    playPrev(){
         Pubsub.publish('PLAY_PREV');
    },
    playNext(){
        Pubsub.publish('PLAY_NEXT');
    },
    formatTime(time){
        time = Math.floor(time);
        let miniutes = Math.floor(time/60);
        let srconds = Math.floor(time%60);
        srconds = srconds<10?`0${srconds}`:srconds;
        return `${miniutes}:${srconds}`
    },
    render(){
        return (
            //<div className="player-page">
            //    <h1 className="caption">我的私人音乐坊&gt;</h1>
            //    <div className="mt20 row">
            //        <div className="controll-wrapper">
            //            <h2 className="music-title">歌曲名称</h2>
            //            <h3 className="music-artist mt10">歌手</h3>
            //            <div className="row mt20">
            //                <div className="left-time -col-auto"></div>
            //                <div className="volume-container">
            //                    <i className="icon-volume rt" style={{top: 5, left: -5}}></i>
            //                    <div className="volume-wrapper">音量控制部分</div>
            //                </div>
            //            </div>
            //            <div style={{height: 10, lineHeight: '10px'}}>播放进度</div>
            //            <div className="mt35 row">
            //                <div>
            //                    <i className="icon prev"></i>
            //                    <i className="icon ml20 play"></i>
            //                    <i className="icon next ml20"></i>
            //                </div>
            //                <div className="-col-auto">
            //                    <i className="icon repeat-cycle"></i>
            //                </div>
            //            </div>
            //        </div>
            //        <div className="-col-auto cover">
            //            <img src="" alt="歌曲名称"/>
            //        </div>
            //    </div>
            //
            //
            //    <MusicProgress
            //        progress={this.state.progress}
            //        onProgressChange={this.progressChangeHandler}
            //        //barColor="#fffFFF"
            //    />
            //
            //</div>
            <div className="player-page">
                <h1 className="caption"><Link to="/list">我的私人音乐坊 &gt;</Link></h1>
                <div className="mt20 row">
                    <div className="controll-wrapper">
                        <h2 className="music-title">{this.props.currentMusicItem.title}</h2>
                        <h3 className="music-artist mt10">{this.props.currentMusicItem.artist}</h3>
                        <div className="row mt20">
                            <div className="left-time -col-auto">-{this.state.leftTime}</div>
                            <div className="volume-container">
                                <i className="icon-volume rt" style={{top: 5, left: -5}}></i>
                                <div className="volume-wrapper">
                                    <MusicProgress
                                        progress={this.state.volume}
                                        onProgressChange={this.progressChangeVolumeHandler}
                                        barColor="#aaa"
                                    />
                                </div>
                            </div>
                        </div>
                        <div style={{height: 10, lineHeight: '10px'}}>
                            <MusicProgress
                                progress={this.state.progress}
                                onProgressChange={this.progressChangeHandler}
                                //barColor="#fffFFF"
                            />
                        </div>
                        <div className="mt35 row">
                            <div>
                                <i className="icon prev ml20" onClick={this.playPrev}></i>
                                <i className={`icon ml20 ${this.state.isPlay ? 'pause' : 'play'}`}
                                   onClick={this.play}></i>
                                <i className="icon next ml20" onClick={this.playNext}></i>
                            </div>
                            <div className="-col-auto">
                                <i className="icon repeat-cycle"></i>
                            </div>
                        </div>
                    </div>
                    <div className="-col-auto cover">
                        <img src={this.props.currentMusicItem.cover} alt={this.props.currentMusicItem.title}/>
                    </div>
                </div>
            </div>
        );
    }
});

export default Player;